<template>
    <div class="container">
        <div class="list">
            <!--  -->
            <div class="row-b list-i" v-for="(item, index) in list" :key="index" >
                <div>
                    <div class="align-flex">
                        <div class="phone" v-html="item.dom"></div>
                        <div class="tips-box" v-if="item.isBlacklist">免打扰</div>
                    </div>
                    <!-- <div class="time">拨号时间：2024-09-10 12:22</div> -->
                </div>
                <!-- <img class="phone-img" src="../../static/phone/phone.png" /> -->
            </div>
        </div>
        <img class="popup-phone-img" src="../../static/phone/phone.png" @click="onPopup"/>
        <uni-popup :safe-area="false" ref="phonePopup" type="bottom" mask-background-color="rgba(0,0,0,0)"
            background-color="rgba(0,0,0,0)">
            <div class="pop-container">
                <div class="input-box row-b">
                    <!-- <input class="uni-input" disabled :value="numValue" /> -->
                    <div class="align-flex uni-input">
                        <!-- align-flex -->
                        <!-- :class="['tab-i', tabIndex === 0 ? 'tab-i-active' : '']" -->
                        <div :class="[index === 2 || index === 6 ? 'mr-6' : '' ]" v-for="(item, index) in numValue" :key="index">{{ item }}</div>
                    </div>
                    <img class="delete-img" src="../../static/phone/close.png" @click="onClearNumValue" />
                </div>
                <div class="num-box">
                    <div class="num-i" v-for="(item, index) in numList" :key="index" @click="onSelectNum(item)"> {{item}}</div>
                    <div class="num-i" @click="onClosePopup()">
                        <img class="more-img" src="../../static/phone/more.png" />
                    </div>
                    <div class="num-i" @click="onPhoneCall">
                        <img class="phone-active-img" src="../../static/phone/phone-active.png" />
                    </div>
                    <div class="num-i" @click="onDeleteNum">
                        <img class="close-active-img" src="../../static/phone/close-active.png" />
                    </div>
                </div>
            </div>
        </uni-popup>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { wait } from "@/utils/util"
import { getQueryByPhone } from "@/api/phone"
const phonePopup = ref()
const numValue = ref('')
const numList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'])
const formlist = ref([] as { fromList: [], completeList:[], name: string, date: string, key: string }[])
const storageKeyList = ref([] as string[])
const list = ref([] as {phone:string, dom:string, isBlacklist:boolean}[])
onLoad(async () => {
    console.log("页面加载了")
    const storageInfo = uni.getStorageInfoSync()
    storageKeyList.value = storageInfo.keys.filter(item => {
        return item.includes('phone')
    })
    storageKeyList.value.forEach((item: string) => {
        formlist.value.push(uni.getStorageSync(item))
    })
    console.log(formlist.value, 'formlistformlist')
    await wait(100)
    phonePopup.value.open('bottom')
})
const onPopup = () => {
    phonePopup.value.open('bottom')
}
const onClosePopup = () => {
    phonePopup.value.close()
}
const onClearNumValue = () => {
    numValue.value = ''
    getCleanData()
}

const getCleanData = async () => {
    const arr = [] as {phone:string, isBlacklist:boolean}[]
    const htmlArr = [] as {phone:string, dom:string, isBlacklist:boolean}[]
    formlist.value.forEach((item) => {
        item.fromList.forEach((ite: { phone: string, isBlacklist:boolean }) => {
            if (ite.phone.includes(numValue.value)) {
                arr.push(ite)
            }
        })
    })
    if (numValue.value.length > 7) {
        let result = await getQueryByPhone({ phone: numValue.value }, { notLoading: true })
        result = result.map((item:string) => {
            return {
                phone: item,
                isBlacklist: true
            }
        })
        if (result.length > 0) {
            arr.push(...result)
        }
        arrSort(arr).forEach((item:any) => {
            const regex = new RegExp(numValue.value, 'gi')
            htmlArr.push({
                phone: item.phone,
                isBlacklist: item.isBlacklist,
                dom: item.phone.replace(regex, `<span style="color: #3E5FF5;">$&</span>`)
            })
        })
        list.value = htmlArr
    } else {
        list.value = []
    }
}

const arrSort = (tempArr:any) => {
    const newArr = []
    for (let i = 0; i < tempArr.length; i++) {
        if (newArr.indexOf(tempArr[i].phone) === -1) {
            newArr.push(tempArr[i].phone)
        } else {
            tempArr.splice(i, 1)
            i--
        }
    }
    return tempArr
}
const onSelectNum = async (event: string) => {
    numValue.value += event
    await getCleanData()
}
const onDeleteNum = async () => {
    numValue.value = numValue.value.slice(0, -1)
    await getCleanData()
}
const onPhoneCall = () => {
    uni.makePhoneCall({
        phoneNumber: numValue.value
    })
}
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    background-color: #fafafc;
    @include padding(0 40rpx);
}

.list {
    margin-top: 24rpx;

    .list-i {
        @include padding(30rpx 0);
    }

    .phone {
        color: #202536;
        font-size: 32rpx;
        font-weight: 600;
        margin-right: 19rpx;
    }

    .tips-box {
        @include padding(3rpx 15rpx);
        border: 1rpx solid #FF7642;
        background-color: #FFF1EC;
        color: #FF7642;
        border-radius: 8rpx;
    }

    .phone-img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 30rpx;
    }

    .time {
        color: #565868;
        font-size: 24rpx;
        margin-top: 12rpx;
    }

}
.popup-phone-img{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    bottom: 300rpx;
    right: 40rpx;
}

.pop-container {
    background-color: #FFFFFF;
    border-radius: 8rpx 8rpx 0 0;
    @include padding(0 0 68rpx 0);

    .input-box {
        @include padding(21rpx 56rpx);
        height: 114rpx;

        .uni-input {
            color: #3E5FF5;
            font-size: 60rpx;
            font-weight: 600;
            height: 68rpx;
        }

        .delete-img {
            width: 34rpx;
            height: 34rpx;
            margin-left: 25rpx;
        }
    }

    .num-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .num-i {
        width: 250rpx;
        height: 93rpx;
        line-height: 93rpx;
        text-align: center;
        color: #202536;
        font-weight: 600;
        font-size: 56rpx;
    }

    .more-img {
        width: 39rpx;
        height: 48rpx;
    }

    .close-active-img {
        width: 48rpx;
        height: 48rpx;
    }

    .phone-active-img {
        width: 86rpx;
        height: 86rpx;
    }

}

.row-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.align-flex {
    display: flex;
    align-items: center;
}
.mr-6{
    margin-right: 24rpx;
}
</style>
